<!-- Author:Rain -->
<template>
    <div>Person:{{ person }}</div>
    <button @click="change">change</button>
    <button @click="changeALL">changeALL</button>
</template>

<script setup lang="ts">
import { shallowRef,watchEffect,triggerRef} from "vue"

//shallowRef() 和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。
let person=shallowRef({name:'xiaoyu',age:20,address:{city:'衡阳'}})

// 会发现这里可以更改！！！
person.value.hh="xiaorou"
person.value.address.city="北京"

watchEffect(() => {
  console.log(person.value.name)
})

function change(){
    console.log("更改了信息");
    person.value.name="xiaoyugege"
person.value.address.city="杭州"
//triggerRef()  强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
triggerRef(person)
}
function changeALL(){
    //这里整个就可以更改！！！
    person.value={name:'罗雨',age:21,address:{city:'杭州'}}
}



</script>

<style scoped>

</style>